// 画布基本设置（这些例子上面都有）
export const configSetting = (Shape) => {
// export const configSetting = () => {
  return {
    grid: true,
    width: Shape.width,
    height: Shape.height,
    // 是否监听容器大小改变，并自动更新画布大小。默认监听画布容器，也可以指定监听的元素，如 Document。
    autoResize: false,
    //	平移节点。true，节点移动时无法超过画布区域。
    translating: { restrict: true },
    // 鼠标滚轮缩放，默认禁用。
    mousewheel: {
      enabled: false,
      zoomAtMousePosition: true,
      modifiers: ["ctrl"],
      minScale: 1,
      maxScale: 3,
    },
    scroller: {
      enabled: false,
    },
    // 当工具项渲染完成时触发的回调。
    onToolItemCreated({ tool }) {
      console.log("当工具项渲染完成时触发的回调。");
      const handle = tool;
      const options = handle.options;
      if (options && options.index % 2 === 1) {
        tool.setAttrs({ fill: "red" });
      }
    },
    // 高亮选项。
    highlighting: {
      magnetAdsorbed: {
        name: "stroke",
        args: {
          attrs: {
            // fill: "#5F95FF",
            // stroke: "#5F95FF",
            fill: "#fff",
            stroke: "#fff",
          },
        },
      },
    },
    // 缩放节点，默认禁用。
    resizing: true,
    // 旋转节点，默认禁用。
    rotating: true,
    // 点选/框选，默认禁用。
    selecting: {
      enabled: true,
      //   rubberband: true,
      //   showNodeSelectionBox: true,
      filter(node) {
        // console.log('node.data.type', node.data.type)
        return node.data.type !== "background"; // 节点过滤器  加入后不可选中这个节点
      },
    },
    // 对齐线，默认禁用。
    snapline: true,
    // 键盘快捷键，默认禁用。
    keyboard: true,
    // 剪切板，默认禁用。
    clipboard: true,
    // 连线选项。
    // connecting: {
    //   router: {
    //     name: 'manhattan',
    //     args: {
    //       padding: 1,
    //     },
    //   },
    //   connector: {
    //     name: 'rounded',
    //     args: {
    //       radius: 8,
    //     },
    //   },
    //   anchor: 'center',
    //   connectionPoint: 'anchor',
    //   allowBlank: false,
    //   snap: {
    //     radius: 20,
    //   },
    //   createEdge() {
    //     console.log('createEdge')
    //     return new Shape.Edge({
    //       attrs: {
    //         line: {
    //           stroke: '#A2B1C3',
    //           strokeWidth: 2,
    //           targetMarker: {
    //             name: 'block',
    //             width: 12,
    //             height: 8,
    //           },
    //         },
    //       },
    //       zIndex: 0,
    //     })
    //   },
    //   validateConnection({ targetMagnet }) {
    //     return !!targetMagnet
    //   },
    // },
  };
};

/**
 * 节点预设类型
 * 0椭圆形: defaultOval,
 * 1方形: defaultSquare,
 * 2圆角矩形: defaultYSquare,
 * 3菱形: defaultRhombus,
 * 4平行四边形: defaultRhomboid,
 * 5圆形: defaultCircle,
 * 6图片: otherImage
 * 到时候通过传入的type===通过匹配 data里面设置的type获取到相应的节点设置内容
 * 编辑的时候也可以通过节点里面的data.type 获取到到底是什么节点进行响应设设置
 */
export const configNodeShape = (type) => {
  const nodeShapeList = [
    {
      label: "自定义按钮",
      data: {
        type: "linkbutton",
      },
      shape: "rect",
      width: 100,
      zIndex: 11,
      height: 50,
      url:'',
      markup: [
        {
          tagName: "rect",
          selector: "body",
        },
        // {
        //   tagName: "image",
        // },
        {
          tagName: "text",
          selector: "title",
        },

      ],
      attrs: {
        body: {
          rx: 5,
          ry: 5,
           stroke: 'rgba(0, 0, 0, 0)',
           fill: "#5F95FF",//"#5F95FF"
        },
        title: {
          refX: 50,
          refY: 25,
          fontSize: 18,
          fill: "#fff",
          text: "按钮名称",
          "text-anchor": "middle",
        },

      },
    },
    {
      label: "自定义图片",
      data: {
        type: "yhyImage",
      },
      shape: "rect",
      width: 200,
      zIndex: 10,
      height: 100,
      markup: [
        {
          tagName: "rect",
          selector: "body",
        },
        {
          tagName: "image",
        },
        {
          tagName: "text",
          selector: "title",
        },
        {
          tagName: "text",
          selector: "label",
        },
      ],
      attrs: {
        body: {
          rx: 10,
          ry: 10,
          stroke: 'rgba(0, 0, 0, 0)',
           // stroke: "#f3f3f3",
          // fill: "#5F95FF",
           fill: 'rgba(0, 0, 0, 0)'
        },
        image: {
          width: 90,
          height: 90,
          refX: 5,
          refY: 5,
          xlinkHref:
            "https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg",
        },
        title: {
          refX: 100,
          refY: 32,
          fontSize: 18,
          fill: "#fff",
          text: "名称",
          "text-anchor": "start",
        },
        label: {
          refX: 100,
          refY: 68,
          fontSize: 18,
          fill: "#fff",
          text: "绑定值",
          "text-anchor": "start",
        },
      },
    },

    {
      label: "背景模板",
      data: {
        type: "background",
      },
      shape: "rect",
      zIndex: 1,
      markup: [
        {
          tagName: "rect",
          selector: "body",
        },
        {
          tagName: "image",
        },
      ],
      attrs: {
        body: {
          stroke: 'rgba(0, 0, 0, 0)',//f3f3f3
             // fill: '#5F95FF',
              fill:'rgba(0, 0, 0, 0)',
          //   repeat: 'no-repeat',
        },
        image: {
          x: 0,
          y: 0,
          refX: 0,
          refY: 0,
          xlinkHref: "",
          class: "configuration-bg-class",
        },
      },
    },
  ];
  if (type) {
    const obj = nodeShapeList.find((item) => {
      return item.data.type === type;
    });
    return obj || nodeShapeList;
  }
  return nodeShapeList;
};





/**
* 节点连接桩设置
* 这里设置了上下左右四个
* 并且给style设置了 visibility: 'hidden'，默认是隐藏的。
* 如果设置了隐藏记得在画布里面设置鼠标经过显示。
* graph.on('node:mouseenter', () => {
        const container = document.getElementById('wrapper')
        const ports = container.querySelectorAll('.x6-port-body')
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = val ? 'visible' : 'hidden'
        }
    })
* 如果需要常显去掉每个链接桩里面的
  style: {
        visibility: 'hidden',
     },
* 就可以了
*/
export const configNodePorts = () => {
  return {
    groups: {
      top: {
        position: "top",
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
      right: {
        position: "right",
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
      bottom: {
        position: "bottom",
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
      left: {
        position: "left",
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
    },
    items: [
      {
        group: "top",
      },
      {
        group: "right",
      },
      {
        group: "bottom",
      },
      {
        group: "left",
      },
    ],
  };
};

// 连线 label 设置
export const configEdgeLabel = (labelText, fontColor, fill, stroke) => {
  if (!labelText) {
    return {
      attrs: { labelText: { text: "" }, labelBody: { fill: "", stroke: "" }},
    };
  }
  return {
    markup: [
      {
        tagName: "rect",
        selector: "labelBody",
      },
      {
        tagName: "text",
        selector: "labelText",
      },
    ],
    attrs: {
      labelText: {
        text: labelText || "",
        fill: fontColor || "#333",
        textAnchor: "middle",
        textVerticalAnchor: "middle",
      },
      labelBody: {
        ref: "labelText",
        refX: -8,
        refY: -5,
        refWidth: "100%",
        refHeight: "100%",
        refWidth2: 16,
        refHeight2: 10,
        stroke: stroke || "#555",
        fill: fill || "#fff",
        strokeWidth: 2,
        rx: 5,
        ry: 5,
      },
    },
  };
};

// 键盘事件
export const graphBindKey = (graph) => {
  graph.bindKey(["meta+c", "ctrl+c"], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.copy(cells);
    }
    return false;
  });
  graph.bindKey(["meta+x", "ctrl+x"], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.cut(cells);
    }
    return false;
  });
  graph.bindKey(["meta+v", "ctrl+v"], () => {
    if (!graph.isClipboardEmpty()) {
      const cells = graph.paste({ offset: 32 });
      graph.cleanSelection();
      graph.select(cells);
    }
    return false;
  });
  // undo redo
  graph.bindKey(["meta+z", "ctrl+z"], () => {
    if (graph.history.canUndo()) {
      graph.history.undo();
    }
    return false;
  });
  graph.bindKey(["meta+shift+z", "ctrl+shift+z"], () => {
    if (graph.history.canRedo()) {
      graph.history.redo();
    }
    return false;
  });
  // select all
  graph.bindKey(["meta+a", "ctrl+a"], () => {
    const nodes = graph.getNodes();
    if (nodes) {
      graph.select(nodes);
    }
  });
  // delete
  /*
    graph.bindKey('delete', () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.removeCells(cells)
      }
    })
    */
  // zoom
  graph.bindKey(["ctrl+1", "meta+1"], () => {
    console.log("420");
    const zoom = graph.zoom();
    if (zoom < 1.5) {
      graph.zoom(0.1);
    }
  });
  graph.bindKey(["ctrl+2", "meta+2"], () => {
    console.log("427");

    const zoom = graph.zoom();
    if (zoom > 0.5) {
      graph.zoom(-0.1);
    }
  });
  return graph;
};
